<template>
<div>
  <van-nav-bar title="订单中心" left-text="返回" left-arrow @click-left="onClickLeft" />
   <div v-for="(item , index) in orderLists" class="axjsnp">
      <van-swipe-cell class="top">
       <van-card 
        :num="item.count" 
        :price="item.totalPrice"
        :desc="item.goodName" :title="item.shopName"
        class="goods-card"
        :thumb="item.img"/>
    <template #right>
     <van-button square text="删除" type="danger" class="delete-button" />
       </template>
     </van-swipe-cell>
   </div>

</div>

</template>

<script>
import {mapState} from 'vuex'
export default {
name:'OrderDetails',
mounted(){
  this.$store.dispatch('orderList')
},
computed: {
 ...mapState({orderLists:state =>state.orderList.orderLists})
},
methods:{
    onClickLeft() {
        this.$router.push('/personal');
    },
    // 调用接口
  },
beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
    if (from.path !== '/personal') next('/home')
    else next()
    // console.log(from)
    console.log(from.path);
  }
}
</script>

<style lang="less" scoped>
 .top {
  //  width: 368px;
   margin-top: 20px;
   border: 2px solid brown;
   /deep/ .van-card__content {
      margin-left: 20px;
    }
 }
  .goods-card {
    margin: 0;
    background-color: #fff;
  }

  .delete-button {
    height: 100%;
  }
</style>